<template>
  <div class="m-timeline-wrap">
    <div class="m-time-dot">
      <div
        :class="['m-dot-box', { active: data.active === item.year }]"
        v-for="(item, index) in timelineData"
        :key="index"
      >
        <p
          class="u-year"
          v-show="
            item.year == '07:00' ||
            item.year == '12:00' ||
            item.year == '17:00' ||
            item.year == '22:00' ||
            item.year == data.active
          "
        >
          {{
            item.year == "07:00"
              ? "早上"
              : item.year == "12:00"
              ? "中午"
              : item.year == "17:00"
              ? "傍晚"
              : item.year == "22:00"
              ? "夜间"
              : ""
          }}
        </p>
        <div
          :class="[
            'm-dot',
            {
              activemdot:
                item.year == '07:00' ||
                item.year == '12:00' ||
                item.year == '17:00' ||
                item.year == '22:00',
            },
          ]"
          v-show="
            item.year == '07:00' ||
            item.year == '12:00' ||
            item.year == '17:00' ||
            item.year == '22:00' ||
            item.year == data.active
          "
        >
          <!-- <div class="u-dot"></div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, defineProps, watch } from "vue";
const props = defineProps({
  timelineData: Array,
  activeYear: String,
});
let data = reactive({
  active: "",
});
watch(
  () => props.activeYear,
  (newval, oldval) => {
    data.active = newval;
  },
  {
    immediate: true, // 启用首次监听
  }
);
</script>
<style lang="scss" scoped>
// @themeColor: #1890ff;
.m-timeline-wrap {
  margin: 50px auto;
  height: 3px;
  background: #8dc6f5;
  .m-time-dot {
    display: flex;
    justify-content: space-around;
    .m-dot-box {
      cursor: pointer;
      text-align: center;
      transform: translateY(calc(-100% + 10px));
      .u-year {
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        transform: translateY(35px);
        // transition: all 0.3s ease;
      }
      .m-dot {
        margin: 0 auto;
        width: 14px;
        height: 14px;
        background: #c0e7fa;
        border-radius: 50%;
        // transition: all 0.3s ease;
        .u-dot {
          width: 14px;
          height: 14px;
          background: #c0e7fa;
          border-radius: 50%;
          //   transition: all 0.3s ease;
        }
      }
    }
    // .m-dot-box:hover {
    //   .u-year {
    //     color: #1890ff;
    //   }
    //   .m-dot {
    //     .u-dot {
    //       background: #1890ff;
    //     }
    //   }
    // }
    .active {
      .u-year {
        transform: translateY(
          35px
        ); // 同时设置多个transform属性只需用空格间隔，执行时从后往前执行！
        color: #f7a41b;
      }
      .m-dot {
        transform: translateY(19px);
        background: #f7a41b;
      }
      .activemdot {
        transform: translateY(0px);
        // background: #f7a41b;
      }
    }
  }
}
</style>